<template>
  <div class="team-info-box flex-col-start">
    <div style="font-size: 25px;font-weight: 666" class="team-info-item">团队介绍</div>
    <div class="team-info-header flex-row-center">
      {{teamInfo}}
    </div>

    <div style="font-size: 25px;font-weight: 666" class="team-info-item">成员介绍</div>
    <div v-for="(item,index) in teamInfoList" :class="[index%2===0?'left-item':'right-item','team-info-item']">
      <div class="team-info-image-box flex-col-center">
        <div class="team-info-image">
          <el-avatar :size="avatarSize" :src="item.image">

          </el-avatar>
          <div class="team-info-name">
            {{item.name}}
          </div>
        </div>
      </div>

      <div class="team-info-body flex-row-center">
          {{item.content}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeamInfo",
  data(){
    return{
      avatarSize:150,
      teamInfo:"团队介绍",
      teamInfoList:[
        {
          name:"罗海茂",
          image:"https://img0.baidu.com/it/u=566731717,3080205548&fm=253&fmt=auto&app=120&f=JPEG?w=631&h=496",
          content:"我是罗海茂",
          birthday:"",
        },
        {
          name:"杨坤",
          image:"https://img1.baidu.com/it/u=1035554938,3556983387&fm=253&fmt=auto&app=120&f=JPEG?w=1206&h=800",
          content:"我是杨坤",
          birthday:"",
        },
        {
          name:"胡有根",
          image:"https://img0.baidu.com/it/u=3326348426,1257482904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          content:"我是胡有根",
          birthday:"",
        },
        {
          name:"游李滨",
          image:"https://img1.baidu.com/it/u=1036230854,254241139&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          content:"我是游李滨",
          birthday:"",
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">

  .team-info-box{
    background-color: #F4F7F8;
    width: 100%;
    height: 100%;
    max-height: 95vh;
    overflow-y: auto;
    padding: 20px 0;

    .team-info-header {
      @header-height: 300px;
      width: 80%;
      height: @header-height;
      min-height: @header-height;
      border-radius: 5px;
      background-color: #f1f1f1;
      margin-bottom: 50px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
    .team-info-item{
      margin: 10px 0;
      width: 80%;
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 5px;

      &:last-child{
        margin-bottom: 100px;
      }
      .team-info-image-box{
        flex:3;

        .team-info-image{

          .el-avatar{
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border: 1px solid white;
          }
        }
        .team-info-name{
          margin-bottom: 10px;
          font-weight: 600;
        }
      }
      .team-info-body{
        flex: 7;

      }

    }

    //左布局
    .left-item{
      justify-content:flex-start;
      background-color: #A3D0C3;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
    //右布局
    .right-item{
      flex-direction: row-reverse;
      background-color: #0F8686;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      .team-info-body{
        color: white;
      }
    }
  }
</style>